<%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0" />
        <link rel="stylesheet" media="all" href="resources/css/style-controls.css" />
        <link rel="shortcut icon" href="/favicon.ico" />
        <title>Advanced controls</title>
    </head>
    <body>
        <!-- Volume -->
        <section id="volume">
            <h1>Volume</h1>
            <div>
                <a href="controls?action=14" title="Volume minus"><img src="resources/images/controls/volume_minus.png" alt="Volume minus" /></a>
                <a href="controls?action=15" title="Volume plus"><img src="resources/images/controls/volume_plus.png" alt="Volume plus" /></a>
            </div>
        </section>

        <!-- Speed -->
        <section id="speed">
            <h1>Speed</h1>
            <div>
                <a href="controls?action=1" title="Slow"><img src="resources/images/controls/slow.png" alt="Slow" /></a>
                <a href="controls?action=2" title="Fast"><img src="resources/images/controls/fast.png" alt="Fast" /></a>
            </div>
        </section>

        <!-- Forward/backward -->
        <section id="forward_backward">
            <h1>Forward/backward</h1>
            <div>
                <a href="controls?action=18" title="Minus 600s"><img src="resources/images/controls/minus_600.png" alt="Minus 600s" /></a>
                <a href="controls?action=16" title="Minus 30s"><img src="resources/images/controls/minus_30.png" alt="Minus 30s" /></a>
                <a href="controls?action=17" title="Plus 30s"><img src="resources/images/controls/plus_30.png" alt="Plus 30s" /></a>
                <a href="controls?action=19" title="Plus 600s"><img src="resources/images/controls/plus_600.png" alt="Plus 600s" /></a>
            </div>
        </section>

        <!-- Chapters -->
        <section id="chapters">
            <h1>Chapters</h1>
            <div>
                <a href="controls?action=5" title="Previous"><img src="resources/images/controls/previous.png" alt="Previous" /></a>
                <a href="controls?action=6" title="Next"><img src="resources/images/controls/next.png" alt="Next" /></a>
            </div>
        </section>

        <!-- Sound tracks -->
        <section id="sound_tracks">
            <h1>Sound tracks</h1>
            <div>
                <a href="controls?action=3" title="Previous"><img src="resources/images/controls/previous.png" alt="Previous" /></a>
                <a href="controls?action=4" title="Next"><img src="resources/images/controls/next.png" alt="Next" /></a>
            </div>
        </section>

        <!-- Subtitles -->
        <section id="subtitles">
            <h1>Subtitles</h1>
            <div>
                <a href="controls?action=7" title="Previous"><img src="resources/images/controls/previous.png" alt="Previous" /></a>
                <a href="controls?action=9" title="On/Off"><img src="resources/images/controls/on_off.png" alt="On/Off" /></a>
                <a href="controls?action=8" title="Next"><img src="resources/images/controls/next.png" alt="Next" /></a>
                <br />
                <a href="controls?action=10" title="Delay minus 250ms"><img src="resources/images/controls/minus_600.png" alt="Delay minus 250ms" /></a>
                <a href="controls?action=11" title="Delay plus 250s"><img src="resources/images/controls/plus_600.png" alt="Delay plus 250s" /></a>
            </div>
        </section>
    </body>
</html>